<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view style="width: 100%; padding: 48upx;">
      <view class="flex justify-between align-center bg-white"
            style="width: 100%; height: 182upx; border-radius: 10upx;padding-right: 40upx;" @click="handleToPublish(0)">
        <view class="flex flex-direction justify-center" style="padding-left: 40upx;">
          <view style="font-size: 30upx; color: #333333; font-weight: bold;">普通发文</view>
          <view style="height: 10upx;"></view>
          <view style="font-size: 24upx; color: #999999; font-weight: bold;">随时随地分享好文章</view>
        </view>
        <image src="/static/icon/publish/undraw_Mobile_life_re_jtih@2x.png" style="width: 170upx;height: 170upx;"
               mode="aspectFit"></image>
      </view>
      <view class="flex justify-between align-center bg-white help_box" @click="handleToPublish(item.type, item.id)"
            v-for="(item, index) in help_list" :key="index">
        <view class="flex flex-direction justify-center" style="padding-left: 40upx;">
          <view style="font-size: 30upx; color: #333333; font-weight: bold;">{{ item.name }}</view>
          <view style="height: 10upx;"></view>
          <view style="font-size: 24upx; color: #999999; font-weight: bold;">{{ item.intro }}</view>
        </view>
        <image :src="item.img_arr[0]" style="width: 170upx;height: 170upx;" mode="aspectFit"></image>
      </view>
    </view>
    <!--下载链接-->
    <view class="cu-modal" :class="is_line?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 554upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">提示</view>
        </view>
        <view style="font-weight: bold; color: #333333; font-size: 28upx;">手机无法发布，请前往电脑端操作</view>
        <view class="flex justify-center" style="width: 100%; padding: 26upx; word-break:break-all; color: #0052C6;">
<!--          http://cbdtwoweb.tx2.isart.me/-->
          http://cbdweb.tx1.isart.me
        </view>
        <view class="cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx;">
          <view @click="is_line = false" style="width: 50%; text-align: center; font-size: 26upx;">
            取消
          </view>
          <view style="width: 2upx; height: 54upx; background-color: #F8F8F8;"></view>
          <view @click="handleCopyLink()" style="width: 50%; text-align: center; color: #E52718; font-size: 26upx;">
            复制链接
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {category_getListByCon} from "api/my/my"

export default {
  data() {
    return {
      is_line: false, //链接弹框
      help_list: [],// 帮帮列表

    }
  },
  methods: {
    pageInit() {
      category_getListByCon().then(res => {
        this.help_list = res.data.categorys
      })
    },
    /**
     *@name 跳转不同发布
     * @param {Object} num  导向值
     */
    handleToPublish(type, category_id) {
      let url_option = {}
      switch (type){
        case 0:
          url_option = {
            url: '/pages/publish/releaseType/generalRelease/generalRelease'
          }
          break;
          case 'app':
            url_option = {
              url: '/pages/publish/releaseType/projectHelp/projectHelp',
              query: {
                category_id
              }
            }
            break;
            case 'web':
              this.is_line = !this.is_line
              break;
      }
      if (url_option.url) {
        this.$uniNavigateTo(url_option)
      }
    },
    /**
     * @name 复制链接
     */
    //复制下载链接
    handleCopyLink() {
      uni.setClipboardData({
        data: 'http://cbdweb.tx1.isart.me',
        success: ()=> {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
          console.log('success');
        }
      });
      this.is_line = false;
    },
  },
  onLoad() {
    this.pageInit();
  },

}
</script>

<style scoped lang="less">
.search-interval{
  width: 1px;
  height: 54upx;
  background-color: #F8F8F8;
  margin: 0 20%;
}
.cancel {
  width: 50%;
  font-size: 26upx;
}
.determine {
  width: 50%;
  font-size: 26upx;
  color: #E52718;
}
.delete-choose{
  height: 70upx;
  border-top: 1px solid #F8F8F8;
}
.help_box {
  width: 100%;
  height: 182upx;
  border-radius: 10upx;
  margin: 20upx 0;
  padding-right: 40upx;
}

.bounced {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0 rpx;
  left: 0 rpx;
}

.bounced-box {
  width: 554 rpx;
  height: 448 rpx;
  border: 2 rpx solid #000000;
  background-color: #FFFFFF;
  position: absolute;
  top: 46.6%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12 rpx;
  overflow: hidden;
}

.box-title {
  height: 352 rpx;
  padding-top: 26upx;
}

.box-button {
  width: 100%;
  height: 92 rpx;
  display: flex;
  align-items: center;
  border-top: 2 rpx solid rgba(0, 0, 0, 0.04);
  justify-content: center;
}

.button-no {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(153, 153, 153, 1);
  background-color: #FFFFFF;
  font-size: 26 rpx;
}

.button-yes {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2 rpx solid rgba(0, 0, 0, 0.04);
  color: rgba(229, 39, 24, 1);
  background-color: #FFFFFF;
  font-size: 26 rpx;
  font-weight: 700;
}
</style>
